<template>
  <div class="root">
    <van-nav-bar title="黑马商城" :left-text="title" border class="topNav" :fixed="true" @click-left="logout"/>
    <picture-view></picture-view>
    <!-- 宫格 -->
    <van-grid :column-num="3">
      <van-grid-item to="/news">
        <img src="../../assets/image/menu1.png" alt />
        <p>新闻资讯</p>
      </van-grid-item>

      <van-grid-item to="photosharing">
        <img src="../../assets/image/menu2.png" />
        <p>图片分享</p>
      </van-grid-item>

      <van-grid-item to="goods">
        <img src="../../assets/image/menu3.png" />
        <p>商品购买</p>
      </van-grid-item>

      <van-grid-item to="couplback">
        <img src="../../assets/image/menu4.png" />
        <p>留言反馈</p>
      </van-grid-item>

      <van-grid-item to="video">
        <img src="../../assets/image/menu5.png" />
        <p>视频专区</p>
      </van-grid-item>

      <van-grid-item to="contact">
        <img src="../../assets/image/menu6.png" />
        <p>联系我们</p>
      </van-grid-item>
    </van-grid>
    <van-tabbar route border>
      <van-tabbar-item replace to="/homepage">
        <div class="iconfont icon-home"></div>首页
      </van-tabbar-item>
      <van-tabbar-item replace to="/vip">
        <div class="iconfont icon-huiyuan"></div>会员
      </van-tabbar-item>
      <van-tabbar-item replace to="/cart" :info="cartList.length || '' ">
        <div class="iconfont icon-shopping_cart"></div>购物车
      </van-tabbar-item>
      <van-tabbar-item replace to="/search">
        <div class="iconfont icon-sousuo"></div>搜索
      </van-tabbar-item>
      <van-tabbar-item icon="coupon-o" to="/category">分类</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      imgList: [
        'http://www.itcast.cn/subject/webzly/images/1.jpg',
        'http://www.itcast.cn/subject/webzly/images/1.2.jpg',
        'http://www.itcast.cn/images/newslide/homepageandphone/20185609105606277.jpg'
      ],
      title: '退出登录',
      flag: true
    }
  },
  created () {
    this.setImg()
  },
  methods: {
    ...mapMutations(['setPicture']),
    setImg () {
      if (!window.localStorage.getItem('token')) {
        this.title = '登录'
        this.flag = false
      }
      this.setPicture(this.imgList)
    },
    logout () {
      if (!this.flag) {
        this.$router.push('/login')
        return
      }
      window.localStorage.removeItem('token')
      this.$router.push('/login')
    }
  },
  computed: {
    ...mapState(['cartList'])
  }
}
</script>

<style scoped lang="less">
.root {
  margin-top: 47px;
}
.van-swipe img {
  width: 100%;
  height: 210px;
}
.van-grid {
  margin-top: 10px;
}
.van-grid-item img {
  width: 60px;
}
.van-tabbar-item {
  text-align: center;
}
.van-nav-bar {
  background-color: #1989fa;

  .van-nav-bar__left {
    .van-icon {
      color: #fff !important;
    }
    .van-nav-bar__text {
      color: #fff;
      background-color: #1989fa;
    }
  }
  .van-nav-bar__title {
    color: #fff;
  }
}
</style>
